<template>
  <div class="material-input">
    <div class="input-group">
      <label>原料尺寸:</label>
      <input type="number" v-model="originalWidth" placeholder="宽度" />
      <span>x</span>
      <input type="number" v-model="originalHeight" placeholder="高度" />
    </div>
    <div class="input-group">
      <label>开料尺寸:</label>
      <input type="number" v-model="targetWidth" placeholder="宽度" />
      <span>x</span>
      <input type="number" v-model="targetHeight" placeholder="高度" />
    </div>
    <button @click="calculate">计算</button>
  </div>
</template>

<script setup lang="ts">
import {  ref } from 'vue';

const originalWidth = ref<number>(889);
const originalHeight = ref<number>(0);
const targetWidth = ref<number>(0);
const targetHeight = ref<number>(0);


const emit = defineEmits<{
  (e: 'calculate', original: { width: number; height: number }, target: { width: number; height: number }): void;
}>();

const calculate = () => {
  emit('calculate',
    { width: originalWidth.value, height: originalHeight.value },
    { width: targetWidth.value, height: targetHeight.value }
  );
};
</script>

<style scoped>
.material-input {
  margin: 20px;
}

.input-group {
  margin: 10px 0;
}

input {
  width: 100px;
  margin: 0 10px;
}
</style>